<script setup lang='ts'>import { ref } from 'vue';

const navList = ref([
    [
        {
            name: '番剧',
            url: '',
            icon: ''
        },
        {
            name: '电影',
            url: ''
        },
        {
            name: '国创',
            url: ''
        },
        {
            name: '电视剧',
            url: ''
        },
        {
            name: '综艺',
            url: ''
        },
        {
            name: '纪录片',
            url: ''
        },
        {
            name: '动画',
            url: ''
        },
        {
            name: '游戏',
            url: ''
        },
        {
            name: '鬼畜',
            url: ''
        },
        {
            name: '音乐',
            url: ''
        }
    ],
    [
        {
            name: '舞蹈',
            url: ''
        },
        {
            name: '影视',
            url: ''
        },
        {
            name: '娱乐',
            url: ''
        },
        {
            name: '知识',
            url: ''
        },
        {
            name: '科技',
            url: ''
        },
        {
            name: '咨询',
            url: ''
        },
        {
            name: '美食',
            url: ''
        },
        {
            name: '生活',
            url: ''
        },
        {
            name: '汽车',
            url: ''
        },
        {
            name: '时尚',
            url: ''
        }
    ],
    [
        {
            name: '运动',
            url: ''
        },
        {
            name: '动物全',
            url: ''
        },
        {
            name: 'VLOG',
            url: ''
        },
        {
            name: '搞笑',
            url: ''
        },
        {
            name: '单机游戏',
            url: ''
        },
        {
            name: '虚拟up主',
            url: ''
        },
        {
            name: '公益',
            url: ''
        },
        {
            name: '公开课',
            url: ''
        }
    ],
    [
        {
            name: '专栏',
            url: ''
        },
        {
            name: '直播',
            url: ''
        },
        {
            name: '活动',
            url: ''
        },
        {
            name: '课堂',
            url: ''
        },
        {
            name: '社区中心',
            url: ''
        },
        {
            name: '新歌热榜',
            url: ''
        }
    ]
])
</script>
<template>
    <div class="nav-box">
        <div class="nav-container" v-for="(item, index) in navList" :key="index"
            :class="index!=0&&index!=3?'':(index==0?'first':'last')">
            <ul class="nav-content">
                <li v-for="navItem in item" :key="navItem.name">
                    <img class="icon" src="/src/assets/moive.svg" alt="">
                    <span>{{navItem.name}}</span>
                </li>
            </ul>
        </div>
    </div>
</template>
<style lang='less' scoped>
.nav-box {
    display: flex;
    width: 568px;

    .first {
        padding-left: 0 !important;
    }

    .last {
        padding-right: 0 !important;
        border: none !important;
    }

    .nav-container {
        flex: 1;
        padding: 0 20px;
        border-right: 1px solid var(--line_regular);

        .nav-content {
            width: 100%;

            li {
                font-size: 14px;
                line-height: 17px;
                margin: 3px 0;
                padding: 6px;

                .icon {
                    width: 20px;
                    height: 20px;
                    margin-right: 10px;
                }
            }
        }
    }
}
</style>